<template>
	<view class="detailLayout" v-if="item">
		<z-paging ref="paging" v-model="commentList" @query="queryList" empty-view-text="抢先回复" empty-view-img="">

			<view class="soupDetail">
				<soup-tab-group :type="item.soup_type"></soup-tab-group>
				<soup-text-content :lookState="true" :item="item"></soup-text-content>
			</view>

			<!-- <view class="bannerAd">
				<ad unit-id="adunit-bf05c0a93b3fd0d2"></ad>
			</view> -->

			<view class="comment">
				<view class="list" v-if="commentList.length">
					<view class="row" v-for="item in commentList" :key="item._id">
						<comment-item :item="item" :subReply="true"></comment-item>
					</view>
				</view>
				<view v-if="!commentList.length && !noData" style="padding:60rpx">
					<uni-load-more status="loading" :showText="false"></uni-load-more>
				</view>
			</view>


			<template #bottom>
				<view class="interactive">
					<interactive-tab :item="item" :type="1" @comment="handelComment"
						@share="clickShare"></interactive-tab>
					<view class="safe-area-bottom"></view>
				</view>
			</template>

		</z-paging>
	</view>

	<uni-popup type="bottom" ref="commentPopup">
		<comment-reply ref="commentRef" :source="source" @success="replySuccess"></comment-reply>
	</uni-popup>

	<share-posters ref="shareRef" :info="shareInfo"></share-posters>

</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		showToast
	} from '../../utils/common';
	const commentRef = ref(null);
	const source = ref({});
	const db = uniCloud.database();
	const dbCmd = db.command;
	const $ = dbCmd.aggregate;
	const item = ref();
	const current_id = uniCloud.getCurrentUserInfo().uid;
	const shareRef = ref(null)
	const shareInfo = ref(null);
	const commentList = ref([]);
	const paging = ref(null);
	const noData = ref(false);
	let id;
	const commentPopup = ref(null)
	onLoad((e) => {
		e.scene ? id = e.scene : id = e.id
		getDetail();
	})

	//子组件控制开启 父组件 中的 弹出框
	const handelComment = () => {
		commentPopup.value.open();
		commentRef.value.focusFn(); //自动获取焦点
	}

	const queryList = (pageNo, pageSize) => {
		getComment(pageNo, pageSize)
	}

	//获取评论数据
	const getComment = async (pageNo, pageSize) => {
		let skip = (pageNo - 1) * pageSize;
		let {
			result: {
				errCode,
				data
			}
		} = await db.collection("soup-comments").aggregate()
			.match({
				soup_id: id,
				comment_type: 0
			})
			.lookup({
				from: "uni-id-users",
				let: {
					uid: '$user_id'
				},
				pipeline: $.pipeline().match(dbCmd.expr($.eq(['$_id', '$$uid']))).project({
					username: 1,
					avatar: 1
				}).done(),
				as: "userInfo"
			})
			.lookup({
				from: "soup-comments",
				let: {
					id: '$_id'
				},
				pipeline: $.pipeline().match(dbCmd.expr($.eq(['$reply_parent_id', '$$id'])))
					.count('length')
					.done(),
				as: "childCount"
			})
			.lookup({
				from: "soup-comments",
				let: {
					id: '$_id'
				},
				pipeline: $.pipeline().match(dbCmd.expr($.eq(['$reply_parent_id', '$$id'])))
					.lookup({
						from: "uni-id-users",
						let: {
							uid: '$user_id'
						},
						pipeline: $.pipeline().match(dbCmd.expr($.eq(['$_id',
							'$$uid'
						]))).project({
							username: 1
						}).done(),
						as: 'userInfo'
					})
					.project({
						comment_content: $.cond({
							if: $.eq(['$is_delete', true]),
							then: "已被删除",
							else: '$comment_content'
						}),
						userInfo: $.arrayElemAt(['$userInfo', 0])
					})
					.sort({
						like_count: -1
					})
					.limit(2)
					.done(),
				as: "child"
			})
			.lookup({
				from: "soup-like",
				let: {
					commentID: '$_id'
				},
				pipeline: $.pipeline().match(
						dbCmd.expr(
							$.and([
								$.eq([id, '$soup_id']),
								$.eq(['$$commentID', '$comment_id']),
								$.eq(['$user_id', current_id])
							])
						)).count('length')
					.done(),
				as: "likeState"
			})
			.sort({
				comment_date: -1
			})
			.skip(skip)
			.limit(pageSize)
			.project({
				is_delete: 1,
				isLike: $.cond({
					if: $.gt([$.arrayElemAt(['$likeState.length', 0]), 0]),
					then: true,
					else: false
				}),
				child: 1,
				childCount: $.arrayElemAt(['$childCount.length', 0]),
				like_count: 1,
				comment_count: 1,
				comment_type: 1,
				comment_content: $.cond({
					if: $.eq(['$is_delete', true]),
					then: "已被删除",
					else: '$comment_content'
				}),
				soup_id: 1,
				comment_date: 1,
				userInfo: $.arrayElemAt(['$userInfo', 0])
			})
			.end();
		paging.value.complete(data)
		if (data.length == 0) noData.value = true;
		console.log(data);
	}


	//点击分享
	const clickShare = (index) => {
		shareInfo.value = item.value
		shareRef.value.handleShow();
	}
	//回复成功的方法
	const replySuccess = () => {
		showToast("发布成功");
		commentPopup.value.close();
		paging.value.refresh();
	}

	//数据赋值
	onLoad((e) => {
		e.scene ? id = e.scene : id = e.id
		getDetail();
	})

	uni.$on('commentLike', (e) => {
		let index = commentList.value.findIndex(item => item._id == e._id);
		commentList.value[index] = {
			...commentList.value[index],
			...e
		}
	})

	uni.$on("commentRemove", () => {
		nextTick(() => {
			paging.value.refresh();
		})
	})

	//获取数据
	const getDetail = async () => {
		let {
			result: {
				errCode,
				data
			}
		} = await db.collection("soup-jt").aggregate()
			.match({
				status: 1,
				is_delete: dbCmd.neq(true),
				_id: id
			})
			.lookup({
				from: "uni-id-users",
				let: {
					uid: '$user_id'
				},
				pipeline: $.pipeline().match(dbCmd.expr($.eq(['$_id', '$$uid']))).project({
					username: 1,
					avatar: 1
				}).done(),
				as: "userInfo"
			})
			.lookup({
				from: "soup-like",
				let: {
					soupID: '$_id'
				},
				pipeline: $.pipeline().match(
						dbCmd.expr(
							$.and([
								$.eq(['$like_type', 0]),
								$.eq(['$$soupID', '$soup_id']),
								$.eq(['$user_id', current_id])
							])
						)).count('length')
					.done(),
				as: "likeState"
			})
			.project({
				isLike: $.cond({
					if: $.gt([$.arrayElemAt(['$likeState.length', 0]), 0]),
					then: true,
					else: false
				}),
				collect_count: 1,
				comment_count: 1,
				content: 1,
				from: 1,
				like_count: 1,
				soup_type: 1,
				view_count: 1,
				userInfo: $.arrayElemAt(['$userInfo', 0])
			})
			.end()

		if (errCode != 0) return showToast("信息有误，请重新刷新", "none");
		// console.log(data);
		item.value = data[0];
		source.value = {
			soup_id: item.value._id,
			comment_type: 0
		}
	}
</script>

<style lang="scss" scoped>
	.soupDetail {
		padding: 50rpx 30rpx;
		border-bottom: 12rpx solid #F7F7F7;
	}

	.commont {
		min-height: 800rpx;
	}

	.interactive {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: #fff;
		border-top: 1px solid #e4e4e4;
	}
</style>